<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电脑 | 平板</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/product-list.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #333;
            color: white;
        }

        header h1 {
            margin: 0;
        }

        header a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            border-radius: 5px;
        }

        header a:hover {
            background-color: #555;
        }

        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            list-style-type: none;
            padding: 0;
        }

        .product-list li {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            padding: 15px;
            width: 220px; /* Adjusted width for better layout */
            text-align: center;
            transition: box-shadow 0.3s ease, transform 0.3s ease; /* Added transform for hover effect */
        }

        .product-list li:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px); /* Slight lift effect on hover */
        }

        img {
            max-width: 100%;
            max-height: 150px; /* Set maximum height for consistency */
            object-fit: contain; /* Maintain aspect ratio */
            border-radius: 5px;
        }

        .add-to-cart {
            background-color: #28a745; /* Green color */
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: auto; /* Push button to bottom */
        }

        .add-to-cart:hover {
            background-color: #218838; /* Darker green on hover */
        }

        .product-description {
            margin-top: 10px; /* Space between button and description */
            font-size: 14px; /* Font size for description */
            color: #666; /* Grey color for description */
        }

        /* Modal Styles */
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1; 
            left: 0; 
            top: 0; 
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: rgba(0,0,0,0.4); 
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; 
            padding: 20px;
            border-radius: 8px; /* Rounded corners for modal */
            width: 80%; 
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <header>
        <h1>电脑 | 平板</h1>
        <div>
          <a href="cart.html">我的购物车</a>
          <a href="user-center.html">用户中心</a>
      </div>
    </header>

    <ul class="product-list">
        <!-- 产品列表 -->
        <li>
            <img src="./images/电脑/荣耀笔记本 X16 Plus 2025.jpg" alt="荣耀笔记本 X16 Plus">
            <h3>荣耀笔记本 X16 Plus</h3>
            <p>8999元</p>
            <button class="add-to-cart" onclick="addToCart('荣耀笔记本 X16 Plus', 8999)">加入购物车</button>
            <p class="product-description">高性能笔记本，适合办公与游戏。</p>
        </li>

        <li>
            <img src="./images/电脑/小米笔记本独显版 15‘’6.jpg" alt="小米笔记本独显版">
            <h3>小米笔记本独显版</h3>
            <p>4999元起</p>
            <button class="add-to-cart" onclick="addToCart('小米笔记本独显版', 4999)">加入购物车</button>
            <p class="product-description">轻薄便携，适合学生使用。</p>
        </li>

        <li>
            <img src="./images/电脑/联想ThinkPad X1 Carbon.jpg" alt="联想ThinkPad X1 Carbon">
            <h3>联想ThinkPad X1 Carbon</h3>
            <p>9999元</p>
            <button class="add-to-cart" onclick="addToCart('联想ThinkPad X1 Carbon', 9999)">加入购物车</button>
            <p class="product-description">商务人士的首选，轻薄坚固。</p>
        </li>

        <li>
            <img src="./images/电脑/小新Pro 16.jpg" alt="小新Pro 16">
            <h3>小新Pro 16</h3>
            <p>6999元</p>
            <button class="add-to-cart" onclick="addToCart('小新Pro 16', 6999)">加入购物车</button>
            <p class="product-description">强大的性能，适合多任务处理。</p>
        </li>

        <li>
            <img src="./images/电脑/华为MateBook D16.jpg" alt="华为MateBook D16">
            <h3>华为MateBook D16</h3>
            <p>7999元</p>
            <button class="add-to-cart" onclick="addToCart('华为MateBook D16', 7999)">加入购物车</button>
            <p class="product-description">大屏幕，适合设计与娱乐。</p>
        </li>

        <!-- 更多产品 -->
        <!-- 添加其他产品项 -->
        <!-- 示例 -->
        <li>
            <img src="./images/电脑/联想拯救者Y7000P.jpg" alt="联想拯救者Y7000P">
            <h3>联想拯救者Y7000P</h3>
            <p>8499元</p>
            <button class="add-to-cart" onclick="addToCart('联想拯救者Y7000P', 8499)">加入购物车</button>
            <p class="product-description">游戏性能卓越，适合重度游戏用户。</p>
        </li>

        <!-- 平板产品 -->
        <!-- 示例 -->
        <li>
            <img src="./images/平板/Apple 11 英寸 iPad Air第六代.jpg" alt="Apple iPad Air第六代">
            <h3>Apple iPad Air第六代</h3>
            <p>1499元起</p>
            <button class="add-to-cart" onclick="addToCart('Apple iPad Air第六代', 1499)">加入购物车</button>
            <p class="product-description">强大的性能与便携性结合。</p>
        </li>

        <!-- 添加更多平板产品 -->
        
        <!-- 华为MatePad Air -->
        <li>
            <img src="./images/平板/HUAWEI MatePad Air.jpg" alt="华为MatePad Air">
            <h3>华为MatePad Air</h3>
            <p>2999元</p>
            <button class="add-to-cart" onclick="addToCart('华为MatePad Air', 2999)">加入购物车</button>
            <p class="product-description">大屏幕平板，适合学习与娱乐。</p>
        </li>

        <!-- OPPO Pad3 Pro -->
        <li>
            <img src="./images/平板/OPPO Pad 3 Pro.jpg" alt="OPPO Pad3 Pro">
            <h3>OPPO Pad3 Pro</h3>
            <p>3299元</p>
            <button class="add-to-cart" onclick="addToCart('OPPO Pad3 Pro', 3299)">加入购物车</button>
            <p class="product-description">高性能平板，支持多种应用场景。</p>
        </li>

        <!-- 小米Pad6 -->
        <li>
            <img src="./images/平板/Xiaomi Pad 6.jpg" alt="小米Pad6">
            <h3>小米Pad6</h3>
            <p>1999元</p>
            <button class="add-to-cart" onclick="addToCart('小米Pad6', 1999)">加入购物车</button>
            <p class="product-description">性价比高的平板，适合家庭使用。</p>
        </li>

        <!-- 小米Pad7 -->
        <li>
            <img src="./images/平板/Xiaomi Pad7.jpg" alt="小米Pad7">
            <h3>小米Pad7</h3>
            <p>2299元</p>
            <button class="add-to-cart" onclick="addToCart('小米Pad7', 2299)">加入购物车</button>
            <p class="product-description">更大的屏幕，流畅的体验。</p>
        </li>

        <!-- 华为MatePad SE -->
        <li>
            <img src="./images/平板/华为MatePad SE.jpg" alt="华为MatePad SE">
            <h3>华为MatePad SE</h3>
            <p>1699元</p>
            <button class="add-to-cart" onclick="addToCart('华为MatePad SE', 1699)">加入购物车</button>
            <p class="product-description">经济实用的平板，适合儿童和家庭使用。</p>
        </li>
    </ul>

    <!-- JavaScript脚本 -->
    <script>
        function addToCart(productName, price) {
            let cart = JSON.parse(localStorage.getItem('cart')) || [];
            
            // 检查产品是否已在购物车中
            const existingProduct = cart.find(item => item.productName === productName);
            
            if (existingProduct) {
                existingProduct.quantity += 1; // 增加数量
            } else {
                cart.push({ productName, price, quantity: 1 }); // 添加新产品
            }
            
            localStorage.setItem('cart', JSON.stringify(cart)); // 更新购物车
            alert(`${productName} 已加入购物车！价格：${price}元`);
        }
    </script>
</body>

</html>